/**
 * vue插件：封装全局指令
 */
import { useIntersectionObserver } from '@vueuse/core'
// 默认图片
import Load from '@/assets/images/load.gif'
export default {
  install (app) {
    // 测试
    /**
    * 语法：app.directive('指令名', mounted() {} 在绑定元素的父组件挂载之后调用,)
     */
    app.directive('border', {
      /**
      *
      * @param {*} el
      * @param {*} bind
      */
      mounted (el, bind) {
        console.log('指令执行', el, bind)
        el.style.border = `2px solid ${bind.value || 'red'}`
      }
    })

    /**
     * 图片懒加载指令
     */
    app.directive('imgLazy', {
      /**
         *
         * @param {*} el 图片dom对象
         * @param {*} bind 图片地址
         */
      mounted (el, bind) {
        /**
        * 图片懒加载实现：
        * 没有懒加载：
        * <img :src="item.picture" alt="" />
        * 浏览器立即下载渲染
        * 懒加载
        * <img v-imgLazy="item.picture" alt="" />
        * 核心：判断图片元素是否进入可视区
        */
        const { stop } = useIntersectionObserver(
          el, // 监控元素
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 图片进入可视区
              el.src = bind.value
              el.onerror = () => {
                // 图片加载失败
                el.src = Load
              }
              // 关闭监控
              stop()
            }
          }
        )
      }
    })
  }
}
